<template>
  <div class="container">
    <Breadcrumb>
      <BreadcrumbItem>理财产品详情表</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <!-- 模糊查询 -->
    <Form ref="formInfo" label-position="left" :label-width="70" :model="formInfo" inline>
      <FormItem label="账号" prop="productDetailId">
        <i-input v-model="formInfo.productDetailId" placeholder="请输入" style="width: 200px"></i-input>
      </FormItem>
      <Button type="primary" icon="ios-search" @click="selectProductDetail()">查询</Button>
    </Form>
    <!-- 添加、删除 -->
    <div class="butt">
      <Button type="error" icon="md-close">批量删除</Button>
    </div>
    <Table border :columns="columns7" :data="data6" class="table"></Table>
    
    <Page :total="pageTotal" 
    :current="pageNum" 
    :page-size="pageSize" 
    show-elevator 
    show-sizer 
    show-total 
    placement="top"  
    @on-change="handlePage" 
    @on-page-size-change='handlePageSize'
    class="fenye">
    </Page>

    <!--修改密码弹窗-->
    <Modal v-model="formTable.modal" title="用户修改" @on-cancel="modalCancel">
      <Form
        ref="formTable"
        label-position="right"
        :rules="formTableRules"
        :label-width="120"
        :model="formTable"
      >
        <Form-item label="理财产品名称" prop="productName">
          <i-input v-model="formTable.productName"  placeholder="请输入理财产品名称"></i-input>
        </Form-item>
        <Form-item label="理财产品详情" prop="productDesc">
          <i-input v-model="formTable.productDesc"  placeholder="请输入理财产品详情"></i-input>
        </Form-item>
        <Form-item label="利率详情" prop="ratesDesc">
          <i-input v-model="formTable.ratesDesc" placeholder="请输入理财产品利率详情"></i-input>
        </Form-item>
        <Form-item label="理财产品的规则" prop="productDetailRule">
          <i-input v-model="formTable.productDetailRule" placeholder="请输入理财产品价格类型"></i-input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="modalCancel">取消</Button>
        <Button type="primary" icon="checkmark" :loading="formTable.loading" @click="editSubmit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    const validatePassCheck = (rule, value, callback) => {};
    return {
     pageTotal: 0, //数据总数
      pageNum: 1, //初始页
      pageSize: 10, //每页条数
      
      formInfo: {
        productDetailId: ""
      },
      formTable: {
        modal: false,
        loading: false,
        productId:'',
        productDetailId:"",
        productName: "",
        productDesc: "",
        ratesDesc: "",
        productDetailRule: ""
      },
      columns7: [
        {
          type: "selection",
          width: 70,
          align: "center"
        },
        {
          title: "编号",
          width: 70,
          key: "productDetailId",
          align: "center"
        },
        {
          title: "理财产品名称",
          key: "productName",
          align: "center"
        },
        {
          title: "理财产品详情",
          key: "productDesc",
          align: "center"
        },
        {
          title: "利率详情",
          key: "ratesDesc",
          align: "center"
        },
        {
          title: "理财产品存取规则",
          key: "productDetailRule",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 140,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      this.userEdit(params.row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index, params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [
        {
        productId:'',
        productDetailId:"",
        productName: "",
        productDesc: "",
        ratesDesc: "",
        productDetailRule: ""
        },
      ]
    };
  },
  methods: {
    //分页
    handlePage(value) {
      console.log(value);
      this.pageNum = value;
      this.getProductDetail();
    },

    handlePageSize(value) {
      console.log(value);
      this.pageSize = value;
      this.getProductDetail();
    },

    getProductDetail(){
        this.$axios.get("productDetail",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        }).then(response => {
          console.log(response.data)
          this.pageTotal = response.data.tatol
          var result = response.data.data;
          this.data6 = [];
          for(let i = 0;i<result.length;i++){
            this.data6.push({
              productId: result[i].tbProduct.productId,
              productName: result[i].tbProduct.productName,
              productDetailId: result[i].productDetailId,
              productDesc: result[i].productDesc,
              ratesDesc: result[i].ratesDesc,
              productDetailRule: result[i].productDetailRule,
            })

          }

        }).catch(response => {

        })

    },
    //查询
    selectProductDetail() {
      this.$axios.get('productdetail', {
        params: {
          name: this.formInfo.productDetailId
        }
        }).then(response => {
          console.log(response.data)
          this.data6 = response.data.data;
        }).catch()
    
      this.$refs[productDetailId].validate(valid => {
      })
    },
   //删除
    remove(index, row) {
      this.$Modal.confirm({
        title: "温馨提示",
        width: 300,
        content: "<p>你确定要删除?删除后不可恢复!</p>",
        loading: false,
        onOk: () => {
          this.data6.splice(index, row.productDetailId);
          this.$axios.delete("productDetail", {
            params: { productDetailId: row.productDetailId }
          });
        }
      });
    },
    //修改
    editSubmit: function(data) {
      console.log(data)
      this.formTable.loading = true;
      this.$axios
        .put("productdetail", {
          productId: this.formTable.productId,
          productDetailId: this.formTable.productDetailId,
          productName: this.formTable.productName,
          productDesc: this.formTable.productDesc,
          ratesDesc: this.formTable.ratesDesc,
          productDetailRule: this.formTable.productDetailRule,
        })
        .then(response => {
          this.formTable.loading = false;
          if (response.data.code == 0) {
            this.$Notice.success({
              title: "信息修改成功"
            });
          } else {
            this.$Notice.error({
              title: "信息修改失败"
            });
          }
          this.modalCancel();
        })
        .catch(console.log(response.data));
    },
     //获取每一行值
    userEdit(row) {
      console.log (row)
      this.formTable.modal = true
      this.formTable.productId = row.productId,
      this.formTable.productDetailId = row.productDetailId,
      this.formTable.productName = row.productName,
      this.formTable.productDesc = row.productDesc,
      this.formTable.ratesDesc = row.ratesDesc,
      this.formTable.productDetailRule = row.productDetailRule
    },
    //取消修改
    modalCancel () {
      this.formTable.modal = false
      this.$refs['formTable'].resetFields()
    }
  },
  created: function() {
    this.getProductDetail()
    // this.$axios
    //   .get("productdetail")
    //   .then(response => {
    //     console.log(response.data);
    //     var result = response.data.data;
    //     this.data6=[];
    //     for (let i = 0; i < result.length; i++) {
    //       this.data6.push({
    //         productId: result[i].tbProduct.productId,
    //         productName: result[i].tbProduct.productName,
    //         productDetailId: result[i].productDetailId,
    //         productDesc: result[i].productDesc,
    //         ratesDesc: result[i].ratesDesc,
    //         productDetailRule: result[i].productDetailRule,
    //       });
    //     }
    //     console.log(this.data6);
    //   })
    //   .catch();
  }
}
</script>

<style >
.fenye {
  position: relative;
  margin-top: 30px;
  left: 32%;
}
.table {
  position: relative;
  margin-top: 20px;
}
.butt{
  position: relative;
  top: 1px;
  left: 1px;
}
</style>